/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <m-popover
    ref="popover"
    :ok-text="$t('Submit')"
    @ok="_ok"
    @close="close"
    style="width: 600px;"
  >
    <template slot="content">
      <div style="padding:0 20px;">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="100px"
          label-position="right"
        >
          <el-form-item
            label="组名称"
            prop="name"
          >
            <el-input
              v-model="form.name"
              placeholder="请输入组名称"
              :maxlength="12"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="首页展示"
            prop="node"
          >
            <el-switch
              v-model="form.node"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item
            label="中心节点"
            prop="central"
          >
            <el-switch
              v-model="form.central"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
            <span
              class="font999"
              style="margin-left: 10px;"
            >注: 仅支持一个分组为中心节点</span>
          </el-form-item>
          <el-form-item
            label="关联节点"
            prop="links"
          >
            <treeselect
              size="small"
              :options="this.workerGroupList"
              v-model="form.connectedList"
              :multiple="true"
              placeholder="请选择关联节点"
            ></treeselect>
          </el-form-item>
          <el-form-item
            label="Worker地址"
            prop="addrList"
          >
            <treeselect
              size="small"
              :options="this.workerAddressList"
              v-model="form.addrList"
              :multiple="true"
              :placeholder="$t('Please select the worker addresses')"
            ></treeselect>
          </el-form-item>
          <el-form-item
            label="权限用户组"
            prop="addrList"
          >
            <treeselect
              size="small"
              :options="this.workerAddressList"
              v-model="form.addrList"
              :multiple="true"
              :placeholder="$t('Please select the worker addresses')"
            ></treeselect>
          </el-form-item>
        </el-form>
      </div>
      <!-- <m-list-box-f>
                    <template slot="name"><strong>*</strong>{{$t('Group Name')}}</template>
                    <template slot="content">
                        <el-input type="input" v-model="name" maxlength="60" size="mini"
                                  :placeholder="$t('Please enter group name')">
                        </el-input>
                    </template>
                </m-list-box-f>
                <m-list-box-f>
                    <template slot="name"><strong>*</strong>{{$t('Worker Addresses')}}</template>
                    <template slot="content">
                        <treeselect :options="this.workerAddressList" v-model="addrList" :multiple="true"
                                    :placeholder="$t('Please select the worker addresses')"></treeselect>
                    </template>
                </m-list-box-f> -->
    </template>
  </m-popover>
</template>
<script>
  import i18n from '@/module/i18n'
  import store from '@/conf/home/store'
  import mPopover from '@/module/components/popup/popover'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { mapActions } from 'vuex'
  export default {
    name: 'create-warning',
    data () {
      return {
        store,
        workerGroupList: [],
        form: {
          id: 0,
          name: '',
          node: 0,
          central: 0,
          connectedList: [],
          addrList: []
        },
        rules: {
          name: [{ required: true, message: '请输入组名称' }],
          // node: [{ required: true, message: '' }],
          // central: [{ required: true, message: '' }],
          addrList: [{ required: true, message: '请选择worker地址', trigger: 'change' }]
        }
      }
    },
    props: {
      item: Object,
      workerAddressList: Object
    },
    methods: {
      ...mapActions('security', ['getWorkerGroups']),
      _getList (flag) {
        this.getWorkerGroups({ pageNo: 1, pageSize: 1000 }).then(res => {
          this.workerGroupList = res.totalList.filter(e => e.name !== 'default' && e.id !== this.item.id).map(x => ({ id: x.name, label: x.name }))
        })
      },
      _ok () {
        this.$refs.form.validate(valid => {
          if (valid) {
            this._submit()
          }
        })
      },
      _verification () {
        // group name
        if (!this.name) {
          this.$message.warning(`${i18n.$t('Please enter group name')}`)
          return false
        }
        if (!this.addrList.length) {
          this.$message.warning(`${i18n.$t('Worker addresses cannot be empty')}`)
          return false
        }
        return true
      },
      _submit () {
        let param = {
          id: this.form.id,
          name: this.form.name,
          node: this.form.node,
          central: this.form.central,
          connectedList: this.form.connectedList.join(','),
          addrList: this.form.addrList.join(',')
        }
        if (this.item) {
          param.id = this.item.id
        }
        this.$refs.popover.spinnerLoading = true
        this.store.dispatch('security/saveWorkerGroups', param).then(res => {
          this.$refs.popover.spinnerLoading = false
          this.$emit('onUpdate')
          this.$message.success(res.msg)
        }).catch(e => {
          this.$message.error(e.msg || '')
          this.$refs.popover.spinnerLoading = false
        })
      },
      close () {
        this.$emit('close')
      }
    },
    watch: {},
    created () {
      this._getList()
      if (this.item) {
        this.form.id = this.item.id
        this.form.name = this.item.name
        this.form.node = this.item.node
        this.form.central = this.item.central
        this.form.connectedList = this.item.connectedList && this.item.connectedList.split(',') || []
        this.form.addrList = this.item.addrList.split(',')
      }
    },
    mounted () {
    },
    components: { mPopover, Treeselect }
  }
</script>
<style scoped lang="scss">
/deep/.vue-treeselect div,
/deep/.vue-treeselect span {
  line-height: 20px;
}
/deep/.vue-treeselect__placeholder {
  line-height: 32px !important;
}
</style>
